<template>

  <div class="drama-list-container">
    <!-- 页面标题和操作栏 -->
    <div class="page-header">
      <h2 class="page-title">剧目管理</h2>
      <div class="page-actions">
        <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true">添加剧目</el-button>
        <el-input placeholder="搜索剧目名称" v-model="searchQuery" class="search-input" prefix-icon="el-icon-search" clearable
          @clear="fetchDramas" @keyup.enter.native="handleSearch">
          <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-input>
      </div>
    </div>

    <!-- 剧目列表表格 -->
    <el-card shadow="hover" class="table-card">
      <el-table :data="dramaList" border stripe style="width: 100%" v-loading="loading" class="drama-table"
        :show-header="true" table-layout="fixed" :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
        ref="dramaTable">
        <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
        <el-table-column prop="dramaName" label="剧目名称" width="150" align="center"></el-table-column>
        <el-table-column label="剧目分类" width="180" align="center">
          <template slot-scope="scope">
            <div class="category-tag">
              <el-tag v-for="typeId in (scope.row.programtypeId ? scope.row.programtypeId.split(',') : [])" :key="typeId" size="mini" type="success">
                {{ getCategoryName(typeId) }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="剧目描述" min-width="180" max-width="300" align="center"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" align="center">
          <template slot-scope="scope">
            {{ formatTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="createUser" label="创建人" width="120" align="center"></el-table-column>
        <el-table-column label="操作" width="220" align="center" fixed="right">
          <template slot-scope="scope">
            <el-tooltip content="编辑" placement="top">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="媒体列表" placement="top">
              <el-button type="info" size="mini" icon="el-icon-film" @click="handleViewMedia(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页控件 -->
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="total" background>
        </el-pagination>
      </div>
    </el-card>

    <!-- 添加/编辑剧目对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false"
      @closed="resetForm" class="drama-form-dialog" :fullscreen="false">
      <el-form :model="dramaForm" :rules="rules" ref="dramaForm" label-width="100px" class="drama-form"
        label-position="right">
        <div class="form-content">
          <el-card shadow="never" class="form-card">
            <div slot="header" class="form-card-header">
              <i class="el-icon-document"></i> 基本信息
            </div>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="剧目名称" prop="dramaName">
                  <el-input v-model="dramaForm.dramaName" placeholder="请输入剧目名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="节目类型" prop="programTypeId">
                  <el-select v-model="dramaForm.programTypeId" placeholder="请选择节目类别" multiple collapse-tags
                    style="width: 100%">
                    <el-option v-for="item in programTypeList" :key="item.programTypeId" :label="item.programTypeName"
                      :value="item.programTypeId">
                    </el-option>
                  </el-select>
                  <div class="form-tip">
                    <i class="el-icon-info"></i>
                    <span>可选择多个节目类型</span>
                  </div>
                </el-form-item>
                <el-form-item label="剧目描述" prop="description">
                  <el-input type="textarea" :rows="6" placeholder="请输入剧目描述" v-model="dramaForm.description">
                  </el-input>
                  <div class="form-tip">详细描述将有助于用户了解剧目内容</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="封面图片">
                  <div class="upload-container">
                    <el-upload class="avatar-uploader" action="http://localhost:9002/api/system/image/DramaImage"
                      :show-file-list="false" :on-success="handleCoverSuccess" :before-upload="beforeImageUpload"
                      :on-error="handleCoverError" :on-progress="handleCoverProgress" accept=".jpg,.jpeg,.png" drag>
                      <template v-if="dramaForm.imageUrl && !coverUploading">
                        <img :src="dramaForm.imageUrl" class="cover-image"
                          style="object-fit: contain; background-color: #f8f8f8;">
                        <div class="cover-image-actions">
                          <el-button type="danger" icon="el-icon-delete" circle size="mini"
                            @click.stop="removeCover"></el-button>
                          <el-button type="info" icon="el-icon-view" circle size="mini"
                            @click.stop="previewImage"></el-button>
                          <el-button type="primary" icon="el-icon-refresh" circle size="mini"
                            @click.stop="refreshCover"></el-button>
                        </div>
                      </template>
                      <el-progress v-else-if="coverUploading" type="circle" :percentage="coverUploadPercent"
                        :status="coverUploadStatus" class="upload-progress-circle">
                      </el-progress>
                      <div v-else class="cover-placeholder">
                        <i class="el-icon-picture-outline"></i>
                        <div class="placeholder-text">点击或拖拽上传封面</div>
                        <div class="placeholder-tip">推荐尺寸: 400×300px</div>
                      </div>
                    </el-upload>
                    <div class="upload-tip">
                      <i class="el-icon-info"></i>
                      <span>JPG/PNG格式，不超过2MB</span>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </div>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
          <el-button type="primary" @click="submitForm('dramaForm')" :loading="submitLoading" size="medium">确
            定</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 视频预览对话框 -->
    <el-dialog title="视频预览" :visible.sync="videoDialogVisible" width="60%" center class="video-preview-dialog">
      <div class="video-container" v-if="currentVideo">
        <div class="video-title">{{ currentVideoName || '视频预览' }}</div>
        <video :src="currentVideo" controls autoplay class="video-preview-dialog-content"></video>
        <div class="video-description" v-if="currentVideoDescription">{{ currentVideoDescription }}</div>
        <div v-else class="no-description">暂无视频描述</div>
      </div>
      <div v-else class="no-video">没有可预览的视频</div>
    </el-dialog>

    <el-dialog title="音频预览" :visible.sync="audioDialogVisible" width="60%" center class="audio-preview-dialog">
      <div class="audio-container" v-if="currentAudio">
        <div class="audio-title">{{ currentAudioName || '音频预览' }}</div>
        <div class="audio-player-wrapper">
          <audio 
            ref="audioPlayer"
            controls 
            @loadedmetadata="handleAudioMetadataLoaded"
            @timeupdate="handleAudioTimeUpdate"
            @error="handlePlayerError"
          >
            <source :src="currentAudio" type="audio/mpeg">
            您的浏览器不支持音频播放
          </audio>
          
          <!-- 音频信息展示 -->
          <div v-if="audioMetadataLoaded" class="audio-info">
            <span class="audio-info-item">
              <i class="el-icon-time"></i>
              <span class="audio-current-time">{{ currentTimeFormatted }}</span> / 
              <span class="audio-duration">{{ durationFormatted }}</span>
            </span>
          </div>
        </div>
        
        <!-- 音频描述 -->
        <div v-if="currentAudioDescription" class="audio-description">
          <h4>音频描述</h4>
          <p>{{ currentAudioDescription }}</p>
        </div>
        <div v-else class="no-description">暂无音频描述</div>
        
        <!-- 错误提示 -->
        <div v-if="audioError" class="audio-error-message">
          <i class="el-icon-warning-outline"></i> {{ audioError }}
        </div>
      </div>
      <div v-else class="no-video">没有可预览的音频</div>
    </el-dialog>

    <!-- 编辑视频对话框 -->
    <el-dialog title="编辑视频信息" :visible.sync="videoEditDialogVisible" width="50%"
      :before-close="() => videoEditDialogVisible = false">
      <el-form :model="videoEditForm" label-width="80px" size="small" ref="videoEditForm">
        <el-form-item label="视频名称" prop="videoName" :rules="[{ required: true, message: '请输入视频名称', trigger: 'blur' }]">
          <el-input v-model="videoEditForm.videoName" placeholder="请输入视频名称"></el-input>
        </el-form-item>
        <el-form-item label="视频文件" prop="videoUrl">
          <div class="current-video-preview" v-if="videoEditForm.videoUrl">
            <video :src="videoEditForm.videoUrl" class="video-preview" controls></video>
          </div>
          <el-upload 
            class="video-uploader" 
            action="http://localhost:9002/api/system/image/DramaVideo"
            :show-file-list="false" 
            :on-success="handleEditVideoSuccess"
            :before-upload="beforeVideoUpload">
            <div class="upload-button">
              <i class="el-icon-upload"></i>
              <div>点击更换视频文件</div>
            </div>
          </el-upload>
          <div class="upload-tip">支持mp4、avi等格式，文件大小不超过10MB</div>
        </el-form-item>
        <el-form-item label="视频描述" prop="videoDescription">
          <el-input type="textarea" v-model="videoEditForm.videoDescription" placeholder="请输入视频描述" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="videoEditDialogVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="submitVideoEdit" size="medium" :loading="videoEditLoading">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑音频对话框 -->
    <el-dialog title="编辑音频信息" :visible.sync="audioEditDialogVisible" width="50%"
      :before-close="() => audioEditDialogVisible = false">
      <el-form :model="audioEditForm" label-width="80px" size="small" ref="audioEditForm">
        <el-form-item label="音频名称" prop="audioName" :rules="[{ required: true, message: '请输入音频名称', trigger: 'blur' }]">
          <el-input v-model="audioEditForm.audioName" placeholder="请输入音频名称"></el-input>
        </el-form-item>
        <el-form-item label="音频文件" prop="audioUrl">
          <div v-if="audioEditForm.audioUrl" class="current-audio-preview">
            <audio :src="audioEditForm.audioUrl" class="audio-preview" controls></audio>
          </div>
          <el-upload 
            class="audio-uploader" 
            action="http://localhost:9002/api/system/image/DramaAudio"
            :show-file-list="false" 
            :on-success="handleEditAudioSuccess"
            :on-progress="handleEditAudioProgress"
            :on-error="handleEditAudioError"
            :before-upload="beforeAudioUpload">
            <div class="upload-button">
              <i class="el-icon-upload"></i>
              <div>点击更换音频文件</div>
            </div>
          </el-upload>
          <div class="upload-tip">支持mp3、wav等格式，文件大小不超过4MB</div>
        </el-form-item>
        <el-form-item label="音频描述" prop="audioDescription">
          <el-input type="textarea" v-model="audioEditForm.audioDescription" placeholder="请输入音频描述" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="audioEditDialogVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="submitAudioEdit" size="medium" :loading="audioEditLoading">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加视频对话框 -->
    <el-dialog title="添加视频" :visible.sync="addVideoDialogVisible" width="50%" class="media-add-dialog">
      <el-card shadow="never" class="form-card">
        <div slot="header" class="form-card-header">
          <i class="el-icon-video-camera"></i> 为"{{ currentDrama ? currentDrama.dramaName : '' }}"添加视频
        </div>
        <el-form :model="videoForm" label-width="80px" size="small" class="media-form" ref="videoForm">
          <el-form-item label="视频名称" prop="videoName"
            :rules="[{ required: true, message: '请输入视频名称', trigger: 'blur' }]">
            <el-input v-model="videoForm.videoName" placeholder="请输入视频名称"></el-input>
          </el-form-item>
          <el-form-item label="视频文件" prop="videoUrl"
            :rules="[{ required: true, message: '请上传视频文件', trigger: 'change' }]">
            <el-upload
              class="video-uploader"
              action="http://localhost:9002/api/system/image/DramaVideo"
              :show-file-list="false"
              :on-success="handleVideoSuccess"
              :before-upload="beforeVideoUpload"
              :on-progress="handleVideoProgress"
              :on-error="handleVideoError">
              <div v-if="videoUploading" class="upload-progress-box">
                <el-progress type="circle" :percentage="videoUploadPercent" :status="videoUploadStatus" :width="40" style="margin: 0 auto;"></el-progress>
                <div class="upload-progress-text">上传中 {{ videoUploadPercent }}%</div>
              </div>
              <div v-else-if="videoForm.videoUrl" class="video-container-upload">
                <div class="video-name">{{ videoForm.videoName || '未命名视频' }}</div>
                <video :src="videoForm.videoUrl" class="video-preview-upload" controls></video>
                <div class="video-upload-tip">视频已上传，可以点击上方播放</div>
              </div>
              <div v-else class="upload-placeholder">
                <i class="el-icon-video-camera"></i>
                <div>点击上传视频</div>
              </div>
            </el-upload>
            <div class="upload-tip">支持mp4、avi等格式，文件大小不超过10MB</div>
          </el-form-item>
          <el-form-item label="视频描述" prop="description">
            <el-input type="textarea" v-model="videoForm.description" placeholder="请输入视频描述" :rows="3"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVideoDialogVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="submitAddVideo" size="medium" :loading="submitVideoLoading">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加音频对话框 - 优化上传组件 -->
    <el-dialog title="添加音频" :visible.sync="addAudioDialogVisible" width="50%" class="media-add-dialog">
      <el-card shadow="never" class="form-card">
        <div slot="header" class="form-card-header">
          <i class="el-icon-headset"></i> 为"{{ currentDrama ? currentDrama.dramaName : '' }}"添加音频
        </div>
        <el-form :model="audioForm" label-width="80px" size="small" class="media-form" ref="audioForm">
          <el-form-item label="音频名称" prop="audioName"
            :rules="[{ required: true, message: '请输入音频名称', trigger: 'blur' }]">
            <el-input v-model="audioForm.audioName" placeholder="请输入音频名称"></el-input>
          </el-form-item>
          <el-form-item label="音频文件" prop="audioUrl"
            :rules="[{ required: true, message: '请上传音频文件', trigger: 'change' }]">
            <el-upload class="audio-uploader" action="http://localhost:9002/api/system/image/DramaAudio"
              :show-file-list="false" :on-success="handleAudioSuccess" :on-progress="handleAudioProgress"
              :on-error="handleAudioError" :before-upload="beforeAudioUpload">
              <div v-if="audioForm.audioUrl" class="audio-container-upload">
                <div class="audio-name">{{ audioForm.audioName || '未命名音频' }}</div>
                <audio :src="audioForm.audioUrl" class="audio-preview-upload" controls></audio>
                <div class="audio-upload-tip">音频已上传，可以点击上方播放</div>
              </div>
              <div v-else-if="audioUploading" class="upload-loading">
                <i class="el-icon-loading"></i>
                <el-progress type="circle" :percentage="uploadPercent" :status="uploadStatus"></el-progress>
                <div class="upload-progress-text">上传中 {{ uploadPercent }}%</div>
              </div>
              <div v-else class="upload-placeholder">
                <i class="el-icon-headset"></i>
                <div>点击上传音频</div>
              </div>
            </el-upload>
            <div class="upload-tip">支持mp3、wav等格式，文件大小不超过4MB</div>
          </el-form-item>
          <el-form-item label="音频描述" prop="description">
            <el-input type="textarea" v-model="audioForm.description" placeholder="请输入音频描述" :rows="3"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addAudioDialogVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="submitAddAudio" size="medium" :loading="submitAudioLoading">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 媒体列表对话框 -->
    <el-dialog title="媒体列表" :visible.sync="mediaListDialogVisible" width="70%" class="media-list-dialog">
      <el-card shadow="never" class="form-card">
        <div slot="header" class="form-card-header">
          <i class="el-icon-film"></i> "{{ currentDrama ? currentDrama.dramaName : '' }}"的媒体文件
        </div>
        <el-tabs v-model="mediaListActiveTab" type="border-card" class="custom-tabs">
          <el-tab-pane label="视频列表" name="videoList">
            <div class="tab-content">
              <div class="media-header">
                <h3>剧目视频</h3>
                <div style="min-width:100px;display:inline-block;">
                  <el-button v-if="!videoUploading" type="primary" size="small" icon="el-icon-plus" @click="showAddVideoDialog(currentDrama)">添加视频</el-button>
                  <div v-else class="upload-progress-box">
                    <el-progress type="circle" :percentage="videoUploadPercent" :status="videoUploadStatus" :width="32" style="margin: 0 auto;"></el-progress>
                    <div class="upload-progress-text">上传中 {{ videoUploadPercent }}%</div>
                  </div>
                </div>
              </div>
              <div v-if="currentDrama && currentDrama.videoList && currentDrama.videoList.length > 0"
                class="media-list">
                <el-table :data="currentDrama.videoList" border style="width: 100%" size="small">
                  <el-table-column prop="videoId" label="ID" width="80" align="center"></el-table-column>
                  <el-table-column prop="videoName" label="视频名称" min-width="150" align="center"></el-table-column>
                  <el-table-column prop="description" label="描述" min-width="150" align="center"></el-table-column>
                  <el-table-column label="预览" width="80" align="center">
                    <template slot-scope="scope">
                      <el-button type="primary" size="mini" icon="el-icon-video-play" circle
                        @click="previewVideo(scope.row)"></el-button>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="scope">
                      <el-tooltip content="编辑视频信息" placement="top">
                        <el-button type="primary" size="mini" icon="el-icon-edit" circle
                          @click="editVideo(scope.row)"></el-button>
                      </el-tooltip>
                      <el-tooltip content="删除视频" placement="top">
                        <el-button type="danger" size="mini" icon="el-icon-delete" circle
                          @click="deleteVideo(scope.row)"></el-button>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div v-else class="empty-media-tip">
                <i class="el-icon-video-camera"></i>
                <p>暂无视频，请点击"添加视频"按钮添加</p>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="音频列表" name="audioList">
            <div class="tab-content">
              <div class="media-header">
                <h3>剧目音频</h3>
                <el-button type="primary" size="small" icon="el-icon-plus"
                  @click="showAddAudioDialog(currentDrama)">添加音频</el-button>
              </div>
              <div v-if="currentDrama && currentDrama.audioList && currentDrama.audioList.length > 0"
                class="media-list">
                <el-table :data="currentDrama.audioList" border style="width: 100%" size="small">
                  <el-table-column prop="audioId" label="ID" width="80" align="center"></el-table-column>
                  <el-table-column prop="audioName" label="音频名称" min-width="120" align="center"></el-table-column>
                  <el-table-column prop="description" label="描述" min-width="150" align="center"></el-table-column>
                  <el-table-column label="播放" width="80" align="center">
                    <template slot-scope="scope">
                      <el-button type="primary" size="mini" icon="el-icon-headset" circle
                        @click="previewAudio(scope.row)"></el-button>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="scope">
                      <el-tooltip content="编辑音频信息" placement="top">
                        <el-button type="primary" size="mini" icon="el-icon-edit" circle
                          @click="editAudio(scope.row)"></el-button>
                      </el-tooltip>
                      <el-tooltip content="删除音频" placement="top">
                        <el-button type="danger" size="mini" icon="el-icon-delete" circle
                          @click="deleteAudio(scope.row)"></el-button>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div v-else class="empty-media-tip">
                <i class="el-icon-headset"></i>
                <p>暂无音频，请点击"添加音频"按钮添加</p>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mediaListDialogVisible = false" size="medium">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import service from '@/utils/request'

export default {
  name: 'DramaList',
  data() {
    return {
      loading: false,
      submitLoading: false,
      submitVideoLoading: false,
      submitAudioLoading: false,
      dramaList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      searchQuery: '',
      categoryFilter: '',
      dialogVisible: false,
      dialogTitle: '添加剧目',
      addVideoDialogVisible: false,
      addAudioDialogVisible: false,
      activeTab: 'video',
      programTypeList: [],
      dramaForm: {
        dramaId: null,
        dramaName: '',
        programTypeId: [],
        description: '',
        imageUrl: '',
        createTime: '',
        createUser: '',
        videoList: [],
        audioList: [],
        token: localStorage.getItem('token')
      },
      videoForm: {
        videoId: '',
        dramaId: '',
        videoName: '',
        videoUrl: '',
        description: ''
      },
      audioForm: {
        audioId: '',
        dramaId: '',
        audioName: '',
        audioUrl: '',
        description: ''
      },
      currentDrama: null,
      rules: {
        dramaName: [
          { required: true, message: '请输入剧目名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        programTypeId: [
          { required: true, message: '请选择剧目分类', trigger: 'change' }
        ],
        description: [
          { required: true, message: '请输入剧目描述', trigger: 'blur' }
        ]
      },
      videoUploading: false,
      audioUploading: false,
      uploadPercent: 0,
      uploadStatus: '',
      loadingCategories: false,
      coverUploading: false,
      coverUploadPercent: 0,
      coverUploadStatus: '',
      coverUploadError: null,
      videoPreviewVisible: false,
      currentVideoUrl: '',
      videoDeleting: false,
      // 删除audioPreviewVisible，使用computed属性代替
      audioDeleting: false,
      videoEditDialogVisible: false,
      audioEditDialogVisible: false,
      videoEditLoading: false,
      audioEditLoading: false,
      videoEditForm: {
        videoId: '',
        videoName: '',
        videoDescription: '',
        videoUrl: '',
        token: localStorage.getItem('token')
      },
      audioEditForm: {
        audioId: '',
        audioName: '',
        audioDescription: '',
        audioUrl: '',
        token: localStorage.getItem('token')
      },
      mediaListDialogVisible: false,
      mediaListActiveTab: 'videoList',
      videoDialogVisible: false,

      // 添加OSS相关配置
      ossConfig: {
        region: 'oss-cn-beijing', // 按实际情况修改
        accessKeyId: '',
        accessKeySecret: '',
        bucket: 'opera-grf', // 按实际情况修改
        stsToken: '',
        timeout: 60000,
        endpointDomain: 'opera-grf.oss-cn-beijing.aliyuncs.com' // 添加完整的endpoint域名
      },
      ossClient: null,

      // 音频相关数据
      originalAudioUrl: '', // 保存原始音频URL
      currentOssPath: '', // 当前OSS路径
      methodIndex: 0, // 当前尝试的方法索引

      // 整合所有音频相关数据
      audioData: {
        previewVisible: false,
        loading: false,
        url: '',
        name: '',
        description: '',
        currentTime: '00:00',
        duration: '00:00',
        errorMsg: '',
        originalUrl: '',
        ossPath: '',
        methodIndex: 0
      },
      audioDialogVisible: false, // 添加音频对话框可见性控制
      currentAudio: '', // 当前播放的音频URL
      currentAudioName: '', // 当前音频名称
      currentAudioDescription: '', // 当前音频描述
      audioMetadataLoaded: false, // 音频元数据是否已加载
      currentTimeFormatted: '00:00', // 当前播放时间格式化
      durationFormatted: '00:00', // 音频总时长格式化
      audioError: null, // 音频播放错误信息
      videoUploadPercent: 0,
      videoUploadStatus: '',
    };
  },
  created() {
    // 获取分类数据
    this.fetchProgramTypes();
    // 获取剧目列表
    this.fetchDramas();
  },
  methods: {
    handleResize() {
      if (this.$refs.dramaTable) {
        this.$refs.dramaTable.doLayout();
      }
    },
    formatTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
    },
    fetchProgramTypes() {
      service.get('/api/content/program/getProgramTypes').then(res => {
        if (res.code === 200) {
          this.programTypeList = res.data;
        } else {
          this.$message.error('获取节目类型失败');
        }
      }).catch(err => {
        this.$message.error(err.message);
      });
    },
    fetchDramas() {
      this.loading = true;

      const params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        dramaName: this.searchQuery,
        token:''
      };

      // 判断当前用户角色是否为戏曲家(roleid为3)
      const roleId = localStorage.getItem('roletype');
      if (roleId === '3') {
        // 如果是戏曲家，则只查询该用户创建的剧目
        const token = localStorage.getItem('token');
        params.token = token;
      }

      service.get('/api/content/drama/getDramaList', {
        params: params
      }).then(res => {
        if (res.code === 200) {
          this.dramaList = res.data.list || [];
          this.total = res.data.total || 0;

          // 如果当前页没有数据但总数大于0，回到上一页
          if (this.dramaList.length === 0 && this.total > 0 && this.currentPage > 1) {
            this.currentPage -= 1;
            this.fetchDramas();
            return;
          }
        } else {
          this.$message.error(res.message || '获取剧目列表失败');
        }
      }).catch(err => {
        console.error('获取剧目列表出错:', err);
        this.$message.error('获取剧目列表失败，请检查网络连接');
      }).finally(() => {
        this.loading = false;
      });
    },
    handleSearch() {
      this.currentPage = 1;
      this.fetchDramas();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchDramas();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchDramas();
    },
    resetForm() {
      this.dramaForm = {
        dramaId: null,
        dramaName: '',
        programTypeId: [],
        description: '',
        imageUrl: '',
        createTime: '',
        createUser: '',
        videoList: [],
        audioList: [],
        token: localStorage.getItem('token')
      };
      if (this.$refs.dramaForm) {
        this.$refs.dramaForm.resetFields();
      }
    },
    handleEdit(row) {
      this.dialogTitle = '编辑剧目';

      console.log('编辑剧目:', row);

      // 确保分类ID存在
      const programTypeId = row.programtypeId ? row.programtypeId.split(',') : [];

      // 检查分类ID是否在当前分类列表中
      if (programTypeId.length > 0 && !programTypeId.every(id => this.programTypeList.some(item => item.programTypeId === id))) {
        console.warn(`部分分类ID在当前分类列表中不存在`);
      }

      this.dramaForm = {
        dramaId: row.dramaId,
        dramaName: row.dramaName,
        programTypeId: programTypeId,
        description: row.description,
        imageUrl: row.imageUrl || '',
        createTime: row.createTime,
        createUser: row.createUser,
        videoList: row.videoList || [],
        audioList: row.audioList || [],
        token: localStorage.getItem('token')
      };

      this.dialogVisible = true;
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该剧目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteDrama(row);
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },

    deleteDrama(row) {
      this.loading = true;


      // 调用API删除剧目
      service.delete(`/api/content/drama/deleteDrama/${row.dramaId}`)
        .then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功');
            // 刷新剧目列表
            this.fetchDramas();
          } else {
            this.$message.error(res.message || '删除失败');
          }
        })
        .catch(err => {
          console.error('删除剧目出错:', err);
          this.$message.error('删除失败，请检查网络连接');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitLoading = true;

          // 准备提交数据
          let formToSubmit = { ...this.dramaForm };

          // 处理类型字段
          if (Array.isArray(formToSubmit.programTypeId)) {
            formToSubmit.programtypeId = formToSubmit.programTypeId.join(',');
            delete formToSubmit.programTypeId;
          }

          // 确保token字段存在
          formToSubmit.token = localStorage.getItem('token');

          const isEdit = !!this.dramaForm.dramaId;
          const request = isEdit
            ? service.put('/api/content/drama/updateDrama', formToSubmit)
            : service.post('/api/content/drama/addDrama', formToSubmit);

          request
            .then(res => {
              if (res.code === 200) {
                this.$message.success(isEdit ? '更新剧目成功' : '添加剧目成功');
                this.dialogVisible = false;
                this.fetchDramas();
                this.resetForm();
              } else {
                this.$message.error(res.message || (isEdit ? '更新失败' : '添加失败'));
              }
            })
            .catch(err => {
              console.error('提交表单出错:', err);
              this.$message.error(isEdit ? '更新失败，请检查网络连接' : '添加失败，请检查网络连接');
            })
            .finally(() => {
              this.submitLoading = false;
            });
        } else {
          this.$message.warning('表单验证失败，请检查填写的内容');
          return false;
        }
      });
    },
    handleCoverSuccess(res, file) {
      // 上传成功后处理
      if (res.code === 200) {
        this.dramaForm.imageUrl = res.data || res.url || URL.createObjectURL(file.raw);
        this.$message.success('封面上传成功');
      } else {
        this.$message.error(res.message || '上传失败');
      }
      this.coverUploading = false;
      this.coverUploadStatus = 'success';
      this.coverUploadError = null;
    },

    beforeImageUpload(file) {
      const isImage = file.type.startsWith('image/');
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImage) {
        this.$message.error('只能上传图片文件!');
        return false;
      }

      if (!isLt2M) {
        this.$message.error('图片大小不能超过2MB!');
        return false;
      }

      return true;
    },
    handleCoverError(error) {
      this.coverUploadError = error;
      this.$message.error('上传封面图片失败');
    },
    handleCoverProgress(event) {
      this.coverUploadPercent = Math.floor(event.percent);
    },
    removeCover() {
      this.dramaForm.imageUrl = '';
    },
    refreshCover() {
      // 模拟刷新封面过程
      this.coverUploading = true;
      this.coverUploadPercent = 0;

      const loadProgress = () => {
        if (this.coverUploadPercent < 90) {
          this.coverUploadPercent += 10;
          setTimeout(loadProgress, 200);
        } else {
          this.coverUploadPercent = 100;
          this.coverUploading = false;
          this.coverUploadStatus = 'success';
        }
      };

      setTimeout(loadProgress, 200);
    },
    previewImage() {
      if (this.dramaForm.imageUrl) {
        // 使用Element UI的图片预览组件
        this.$alert(`<div style="text-align:center"><img src="${this.dramaForm.imageUrl}" style="max-width:100%;max-height:600px;object-fit:contain;" /></div>`,
          '封面预览', {
          dangerouslyUseHTMLString: true,
          customClass: 'image-preview-dialog'
        });
      }
    },
    uploadProgress(event) {
      this.uploadPercent = Math.floor(event.percent);

      if (this.activeTab === 'video') {
        this.videoUploading = true;
      } else {
        this.audioUploading = true;
      }
    },

    beforeVideoUpload(file) {
      const isValidFormat = ['video/mp4', 'video/avi', 'video/quicktime'].includes(file.type);
      const isLt500M = file.size / 1024 / 1024 < 500;

      if (!isValidFormat) {
        this.$message.error('上传视频只能是 mp4/avi 等格式!');
      }
      if (!isLt500M) {
        this.$message.error('上传视频大小不能超过 500MB!');
      }
      return isValidFormat && isLt500M;
    },
    beforeAudioUpload(file) {
      const validFormats = ['audio/mpeg', 'audio/wav', 'audio/mp3', 'audio/ogg', 'audio/webm', 'audio/aac', 'audio/flac'];
      const isValidFormat = validFormats.includes(file.type);
      const isLt500M = file.size / 1024 / 1024 < 500;

      if (!isValidFormat) {
        this.$message.error('上传音频格式不正确，请使用mp3/wav/ogg等常见音频格式!');
        return false;
      }

      if (!isLt500M) {
        this.$message.error('上传音频大小不能超过500MB!');
        return false;
      }

      this.audioUploading = true;
      this.uploadPercent = 0;
      this.uploadStatus = '';

      return true;
    },
    refreshCategories() {
      this.loadingCategories = true;
      this.fetchProgramType().catch(() => {
        // 如果API请求失败，加载默认分类
        this.loadDefaultCategories();
      }).finally(() => {
        this.loadingCategories = false;
      });
    },
    addCustomCategory() {
      // 实现添加自定义分类的逻辑
      console.log('添加自定义分类');
    },
    getCategoryName(programtypeId) {
      const category = this.programTypeList.find(item => item.programTypeId === programtypeId);
      return category ? category.programTypeName : '未知分类';
    },

    // 预览视频
    previewVideo(video) {
      this.currentVideo = video.videoUrl;
      this.currentVideoName = video.videoName || '未命名视频';
      this.currentVideoDescription = video.description || '';
      this.videoDialogVisible = true;
    },

    // 预览音频
    previewAudio(audio) {
      this.currentAudio = audio.audioUrl;
      console.log(this.currentAudio);
      this.currentAudioName = audio.audioName;
      this.currentAudioDescription = audio.description;
      this.audioDialogVisible = true;
    },

    // 删除视频
    deleteVideo(video) {
      this.$confirm('确认要删除该视频吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.videoDeleting = true;

        service.delete(`/api/content/drama/video/deleteVideo/${video.videoId}`)
          .then(response => {
            if (response.code === 200) {
              this.$message.success('视频删除成功');
              // 从当前列表中移除该视频
              if (this.currentDrama && this.currentDrama.videoList) {
                this.currentDrama.videoList = this.currentDrama.videoList.filter(item =>
                  item.videoId !== video.videoId && item.videoId !== video.videoId
                );
              }
              // 刷新剧目列表以获取最新数据
              this.fetchDramas();
            } else {
              this.$message.error(response.message || '视频删除失败');
            }
          })
          .catch(error => {
            console.error('删除视频时出错:', error);
            this.$message.error('删除视频失败: ' + (error.message || '未知错误'));
          })
          .finally(() => {
            this.videoDeleting = false;
          });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },











    // 音频上传成功处理 - 优化
    handleAudioSuccess(res) {
      this.audioUploading = false;
      if (res.code === 200) {
        this.audioForm.audioUrl = res.data;
        this.$message({
          message: '音频上传成功',
          type: 'success',
          duration: 1500
        });
        // 自动设置音频名称（如果用户还没有输入）
        // 已去除自动填充音频名逻辑
      } else {
        this.$message.error(res.message || '音频上传失败');
      }
    },

    // 处理音频上传进度
    handleAudioProgress(event) {
      this.audioUploading = true;
      this.uploadPercent = Math.floor(event.percent);
      if (this.uploadPercent >= 100) {
        this.uploadStatus = 'success';
      }
    },

    // 处理音频上传错误
    handleAudioError(err) {
      this.audioUploading = false;
      this.$message.error('音频上传失败: ' + (err.message || '未知错误'));
      console.error('音频上传失败:', err);
    },

    // 删除音频
    deleteAudio(audio) {
      this.$confirm('确认要删除该音频吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.audioDeleting = true;

        service.delete(`/api/content/drama/audio/deleteAudio/${audio.audioId}`)
          .then(response => {
            if (response.code === 200) {
              this.$message.success('音频删除成功');
              // 从当前列表中移除该音频
              if (this.currentDrama && this.currentDrama.audioList) {
                this.currentDrama.audioList = this.currentDrama.audioList.filter(item =>
                  item.audioId !== audio.audioId && item.audioId !== audio.audioId
                );
              }
              // 刷新剧目列表以获取最新数据
              this.fetchDramas();
            } else {
              this.$message.error(response.message || '音频删除失败');
            }
          })
          .catch(error => {
            console.error('删除音频时出错:', error);
            this.$message.error('删除音频失败: ' + (error.message || '未知错误'));
          })
          .finally(() => {
            this.audioDeleting = false;
          });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },

    // 刷新媒体列表
    refreshMediaList() {
      if (!this.currentDrama || !this.currentDrama.dramaId) {
        this.$message.warning('无法刷新，当前没有选中的剧目');
        return;
      }
      // 仅获取当前剧目的最新数据
      service.get(`/api/content/drama/getDrama/${this.currentDrama.dramaId}`)
        .then(res => {
          if (res.code === 200) {
            // 更新当前剧目数据
            this.currentDrama = res.data;
            this.$message.success('媒体列表已刷新');

            // 同时更新总列表中的对应项
            const index = this.dramaList.findIndex(item => item.dramaId === this.currentDrama.dramaId);
            if (index !== -1) {
              this.dramaList[index] = res.data;
            }
          } else {
            this.$message.error(res.message || '刷新媒体列表失败');
          }
        })
        .catch(err => {
          console.error('刷新媒体列表出错:', err);
          this.$message.error('刷新失败，请检查网络连接');
        })
    },

    // 编辑视频
    editVideo(video) {
      this.videoEditForm = {
        videoId: video.videoId,
        videoName: video.videoName,
        videoDescription: video.description,
        videoUrl: video.videoUrl
      };
      this.videoEditDialogVisible = true;
    },

    // 处理编辑视频时的文件上传成功
    handleEditVideoSuccess(res) {
      if (res.code === 200) {
        this.videoEditForm.videoUrl = res.data;
        this.$message.success('视频上传成功');
      } else {
        this.$message.error(res.message || '视频上传失败');
      }
    },

    // 提交视频编辑
    submitVideoEdit() {
      this.$refs.videoEditForm.validate((valid) => {
        if (valid) {
          this.videoEditLoading = true;

          const params = {
            videoId: this.videoEditForm.videoId,
            videoName: this.videoEditForm.videoName,
            description: this.videoEditForm.videoDescription,
            videoUrl: this.videoEditForm.videoUrl,
            dramaId: this.currentDrama.dramaId,
            token: localStorage.getItem('token')
          };

          service.put('/api/content/drama/video/updateVideo', params)
            .then(response => {
              if (response.code === 200) {
                this.$message.success('视频信息更新成功');
                // 更新本地列表中的数据
                if (this.currentDrama && this.currentDrama.videoList) {
                  const index = this.currentDrama.videoList.findIndex(item => item.videoId === this.videoEditForm.videoId);
                  if (index > -1) {
                    this.currentDrama.videoList[index].videoName = this.videoEditForm.videoName;
                    this.currentDrama.videoList[index].description = this.videoEditForm.videoDescription;
                  }
                }
                this.videoEditDialogVisible = false;
              } else {
                this.$message.error(response.message || '视频信息更新失败');
              }
            })
            .catch(error => {
              console.error('更新视频信息时出错:', error);
              this.$message.error('更新视频信息失败: ' + (error.message || '未知错误'));
            })
            .finally(() => {
              this.videoEditLoading = false;
            });
        }
      });
    },

    // 编辑音频
    editAudio(audio) {
      this.audioEditForm = {
        audioId: audio.audioId,
        audioName: audio.audioName,
        audioDescription: audio.description,
        audioUrl: audio.audioUrl,
        token: localStorage.getItem('token')
      };
      this.audioEditDialogVisible = true;
    },

    // 处理编辑音频时的文件上传成功
    handleEditAudioSuccess(res) {
      if (res.code === 200) {
        this.audioEditForm.audioUrl = res.data;
        this.$message.success('音频上传成功');
      } else {
        this.$message.error(res.message || '音频上传失败');
      }
    },

    // 处理编辑音频时的上传进度
    handleEditAudioProgress(event) {
      this.uploadPercent = Math.floor(event.percent);
      if (this.uploadPercent >= 100) {
        this.uploadStatus = 'success';
      }
    },

    // 处理编辑音频时的上传错误
    handleEditAudioError(err) {
      this.$message.error('音频上传失败: ' + (err.message || '未知错误'));
      console.error('音频上传失败:', err);
    },

    // 提交音频编辑
    submitAudioEdit() {
      this.$refs.audioEditForm.validate((valid) => {
        if (valid) {
          this.audioEditLoading = true;

          const params = {
            audioId: this.audioEditForm.audioId,
            audioName: this.audioEditForm.audioName,
            description: this.audioEditForm.audioDescription,
            audioUrl: this.audioEditForm.audioUrl,
            dramaId: this.currentDrama.dramaId,
            token: localStorage.getItem('token')
          };

          service.put('/api/content//drama/audio/updateAudio', params)
            .then(response => {
              if (response.code === 200) {
                this.$message.success('音频信息更新成功');
                // 更新本地列表中的数据
                if (this.currentDrama && this.currentDrama.audioList) {
                  const index = this.currentDrama.audioList.findIndex(item => item.audioId === this.audioEditForm.audioId);
                  if (index > -1) {
                    this.currentDrama.audioList[index].audioName = this.audioEditForm.audioName;
                    this.currentDrama.audioList[index].description = this.audioEditForm.audioDescription;
                  }
                }
                this.audioEditDialogVisible = false;
              } else {
                this.$message.error(response.message || '音频信息更新失败');
              }
            })
            .catch(error => {
              console.error('更新音频信息时出错:', error);
              this.$message.error('更新音频信息失败: ' + (error.message || '未知错误'));
            })
            .finally(() => {
              this.audioEditLoading = false;
            });
        }
      });
    },



    // 处理查看媒体按钮点击
    handleViewMedia(row) {
      this.currentDrama = row;
      this.mediaListActiveTab = 'videoList';
      this.mediaListDialogVisible = true;
    },

    // 显示添加视频对话框
    showAddVideoDialog(drama) {
      this.currentDrama = drama;
      // 重置视频表单
      this.videoForm = {
        videoId: '',
        dramaId: drama.dramaId,
        videoName: '',
        videoUrl: '',
        description: ''
      };
      this.addVideoDialogVisible = true;
    },

    // 显示添加音频对话框
    showAddAudioDialog(drama) {
      this.currentDrama = drama;
      // 重置音频表单
      this.audioForm = {
        audioId: '',
        dramaId: drama.dramaId,
        audioName: '',
        audioUrl: '',
        description: ''
      };
      this.addAudioDialogVisible = true;
    },

    // 添加视频
    submitAddVideo() {
      this.$refs.videoForm.validate((valid) => {
        if (valid) {
          this.submitVideoLoading = true;
          const params = {
            videoName: this.videoForm.videoName,
            videoUrl: this.videoForm.videoUrl,
            description: this.videoForm.description,
            dramaId: this.currentDrama.dramaId,
            token: localStorage.getItem('token')
          };

          service.post('/api/content/drama/video/addVideo', params)
            .then(res => {
              if (res.code === 200) {
                this.$message.success('视频添加成功');
                this.addVideoDialogVisible = false;
                // 刷新列表
                this.refreshMediaList();
              } else {
                this.$message.error(res.message || '视频添加失败');
              }
            })
            .catch(err => {
              console.error('添加视频出错:', err);
              this.$message.error('视频添加失败，请检查网络连接');
            })
            .finally(() => {
              this.submitVideoLoading = false;
            });
        } else {
          this.$message.warning('请完善视频信息');
        }
      });
    },

    // 添加音频
    submitAddAudio() {
      this.$refs.audioForm.validate((valid) => {
        if (valid) {
          this.submitAudioLoading = true;
          const params = {
            audioName: this.audioForm.audioName,
            audioUrl: this.audioForm.audioUrl,
            description: this.audioForm.description,
            dramaId: this.currentDrama.dramaId,
            token: localStorage.getItem('token')
          };

          service.post('/api/content/drama/audio/addAudio', params)
            .then(res => {
              if (res.code === 200) {
                this.$message.success('音频添加成功');
                this.addAudioDialogVisible = false;
                // 刷新列表
                this.refreshMediaList();
              } else {
                this.$message.error(res.message || '音频添加失败');
              }
            })
            .catch(err => {
              console.error('添加音频出错:', err);
              this.$message.error('音频添加失败，请检查网络连接');
            })
            .finally(() => {
              this.submitAudioLoading = false;
            });
        } else {
          this.$message.warning('请完善音频信息');
        }
      });
    },

    // 视频上传成功处理
    handleVideoSuccess(res) {
      this.videoUploading = false;
      this.videoUploadPercent = 0;
      this.videoUploadStatus = '';
      if (res.code === 200) {
        this.videoForm.videoUrl = res.data;
        this.$message.success('视频上传成功');
      } else {
        this.$message.error(res.message || '视频上传失败');
      }
    },

    handleAudioMetadataLoaded(event) {
      this.audioMetadataLoaded = true;
      this.currentTimeFormatted = this.formatAudioTime(event.target.currentTime);
      this.durationFormatted = this.formatAudioTime(event.target.duration);
    },

    handleAudioTimeUpdate(event) {
      this.currentTimeFormatted = this.formatAudioTime(event.target.currentTime);
    },

    handlePlayerError(event) {
      this.audioError = event.target.error ? event.target.error.message : '未知错误';
    },
    
    // 格式化时间为 MM:SS 格式
    formatAudioTime(seconds) {
      if (!seconds || isNaN(seconds)) return '00:00';
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = Math.floor(seconds % 60);
      return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
    },

    handleVideoProgress(event) {
      this.videoUploading = true;
      this.videoUploadPercent = Math.floor(event.percent);
      if (this.videoUploadPercent >= 100) {
        this.videoUploadStatus = 'success';
      }
    },

    handleVideoError(err) {
      this.videoUploading = false;
      this.videoUploadPercent = 0;
      this.videoUploadStatus = '';
      this.$message.error('视频上传失败: ' + (err.message || '未知错误'));
    },
  
  }
}


</script>

<style scoped>
.drama-list-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 22px;
  color: #333;
  margin: 0;
  position: relative;
  padding-left: 15px;
}

.page-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: #8B0000;
  border-radius: 2px;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-input {
  width: 250px;
}

.category-select {
  width: 180px;
}

.table-card {
  margin-bottom: 20px;
  border-radius: 4px;
}

.drama-table {
  margin-bottom: 20px;
  table-layout: fixed;
  width: 100%;
}

.drama-table .el-table__body {
  width: 100% !important;
}

.drama-table .el-table__header {
  width: 100% !important;
}

.drama-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 表单样式 */
.drama-form-dialog .el-dialog__body {
  padding: 20px 30px;
}

.drama-form {
  margin-bottom: 0;
}

.form-content {
  margin-bottom: 20px;
}

.form-card {
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}

.form-card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.form-card-header i {
  margin-right: 8px;
  color: #409EFF;
}

.form-section {
  margin-top: 20px;
}

.dialog-footer {
  text-align: right;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}

/* 上传组件样式 */
.upload-container {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  width: 100%;
  margin: 0 auto;
}

.avatar-uploader .el-upload {
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  transition: all 0.3s;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.3);
}

.cover-placeholder {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #8c939d;
  background-color: #fafafa;
  border-radius: 4px;
  border: 1px dashed #d9d9d9;
}

.cover-placeholder:hover {
  border-color: #409EFF;
  color: #409EFF;
}

.cover-placeholder i {
  font-size: 64px;
  margin-bottom: 15px;
  color: #c0c4cc;
}

.cover-placeholder:hover i {
  color: #409EFF;
}

.cover-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  position: relative;
  border-radius: 4px;
}

.cover-image-actions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}

.avatar-uploader:hover .cover-image-actions {
  opacity: 1;
}

.cover-image-actions .el-button {
  margin: 0 5px;
}

.placeholder-text {
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: 500;
}

.placeholder-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}

.upload-progress-circle {
  margin: 60px auto;
  display: block;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
  margin-top: 7px;
  padding: 8px;
  background-color: #f8f8f8;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.upload-tip i {
  font-size: 14px;
  margin-right: 5px;
  color: #E6A23C;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  line-height: 1.2;
  padding-top: 5px;
  display: flex;
  align-items: center;
}

.form-tip i {
  font-size: 14px;
  margin-right: 5px;
  color: #909399;
}

/* 媒体信息区域样式 */
.media-info {
  padding: 10px 0;
}

.media-section {
  margin-bottom: 15px;
}

.media-section h4 {
  font-size: 14px;
  color: #606266;
  margin: 0 0 10px 0;
  font-weight: normal;
}

.media-tag {
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 0 10px;
  height: 28px;
  line-height: 26px;
}

.empty-media {
  text-align: center;
  padding: 30px 0;
  color: #909399;
}

.empty-media i {
  font-size: 36px;
  margin-bottom: 10px;
}

.empty-media p {
  margin: 0;
  font-size: 14px;
}

/* 媒体上传对话框样式 */
.media-upload-dialog .el-tabs__header {
  margin-bottom: 0;
}

.custom-tabs {
  border: none;
  box-shadow: none;
}

/* 类别标签样式 */
.category-tag {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.category-tag .el-tag {
  margin: 2px;
  max-width: 100%;
  white-space: normal;
  height: auto;
  line-height: 1.5;
  padding: 3px 6px;
}

.custom-tabs .el-tabs__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}

.custom-tabs .el-tabs__nav {
  border: none;
}

.custom-tabs .el-tabs__item {
  height: 48px;
  line-height: 48px;
  font-size: 15px;
}

.tab-content {
  padding: 20px;
}

.media-form {
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.media-form .el-form-item:last-child {
  margin-bottom: 0;
}

.media-uploader {
  text-align: center;
  background-color: #fafafa;
  margin-bottom: 20px;
  border: none;
}

.media-uploader .el-upload-dragger {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  background-color: #ffffff;
  transition: all 0.3s;
}

.media-uploader .el-upload-dragger:hover {
  border-color: #409EFF;
}

.media-uploader i {
  font-size: 48px;
  color: #c0c4cc;
  margin-bottom: 10px;
}

.upload-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-text span {
  font-size: 16px;
  color: #606266;
  margin-bottom: 10px;
}

.upload-progress {
  margin-top: 20px;
}

.image-preview-dialog .el-message-box__message {
  overflow: auto;
  max-height: 80vh;
}

.image-preview-dialog .el-message-box__message img {
  object-fit: contain;
  max-width: 100%;
}

.upload-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.upload-header h3 {
  margin: 0;
  font-size: 16px;
  color: #409EFF;
}

.upload-tip-text {
  font-size: 13px;
  color: #909399;
  display: flex;
  align-items: center;
}

.upload-tip-text i {
  margin-right: 5px;
  color: #E6A23C;
}

.upload-guide {
  margin-top: 20px;
  display: flex;
  padding: 15px;
  background-color: #f0f9ff;
  border-radius: 6px;
  border-left: 3px solid #409EFF;
}

.guide-icon {
  font-size: 36px;
  color: #409EFF;
  margin-right: 15px;
  display: flex;
  align-items: center;
}

.guide-content {
  flex: 1;
}

.guide-content h4 {
  margin: 0 0 10px 0;
  color: #409EFF;
  font-size: 15px;
}

.guide-content p {
  margin: 5px 0;
  font-size: 13px;
  color: #606266;
}

.media-tabs {
  margin: 10px;
  border: none;
}

.media-list {
  padding: 10px;
}

.empty-media-tip {
  text-align: center;
  padding: 30px 0;
  color: #909399;
}

.empty-media-tip i {
  font-size: 40px;
  margin-bottom: 10px;
  color: #DCDFE6;
}

.empty-media-tip p {
  margin: 5px 0;
}

.media-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.media-header h4 {
  margin: 0;
  color: #409EFF;
  font-size: 16px;
}

.media-list-dialog .el-dialog__body {
  padding: 20px 30px;
}

.media-list-dialog .el-card {
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}

.media-list-dialog .form-card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.media-list-dialog .form-card-header i {
  margin-right: 8px;
  color: #409EFF;
}

.media-list-dialog .form-section {
  margin-top: 20px;
}

.media-list-dialog .dialog-footer {
  text-align: right;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}

.media-list-dialog .upload-container {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  width: 100%;
  margin: 0 auto;
}

.media-list-dialog .avatar-uploader .el-upload {
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  transition: all 0.3s;
}

.media-list-dialog .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.3);
}

.media-list-dialog .cover-placeholder {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #8c939d;
  background-color: #fafafa;
  border-radius: 4px;
  border: 1px dashed #d9d9d9;
}

.media-list-dialog .cover-placeholder:hover {
  border-color: #409EFF;
  color: #409EFF;
}

.media-list-dialog .cover-placeholder i {
  font-size: 64px;
  margin-bottom: 15px;
  color: #c0c4cc;
}

.media-list-dialog .cover-placeholder:hover i {
  color: #409EFF;
}

.media-list-dialog .cover-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  position: relative;
  border-radius: 4px;
}

.media-list-dialog .cover-image-actions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}

.media-list-dialog .avatar-uploader:hover .cover-image-actions {
  opacity: 1;
}

.media-list-dialog .cover-image-actions .el-button {
  margin: 0 5px;
}

.media-list-dialog .placeholder-text {
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: 500;
}

.media-list-dialog .placeholder-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}

.media-list-dialog .upload-progress-circle {
  margin: 60px auto;
  display: block;
}

.media-list-dialog .upload-tip {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
  margin-top: 7px;
  padding: 8px;
  background-color: #f8f8f8;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.media-list-dialog .upload-tip i {
  font-size: 14px;
  margin-right: 5px;
  color: #E6A23C;
}

.media-list-dialog .form-tip {
  font-size: 12px;
  color: #909399;
  line-height: 1.2;
  padding-top: 5px;
  display: flex;
  align-items: center;
}

.media-list-dialog .form-tip i {
  font-size: 14px;
  margin-right: 5px;
  color: #909399;
}

.media-list-dialog .media-info {
  padding: 10px 0;
}

.media-list-dialog .media-section {
  margin-bottom: 15px;
}

.media-list-dialog .media-section h4 {
  font-size: 14px;
  color: #606266;
  margin: 0 0 10px 0;
  font-weight: normal;
}

.media-list-dialog .media-tag {
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 0 10px;
  height: 28px;
  line-height: 26px;
}

.media-list-dialog .empty-media {
  text-align: center;
  padding: 30px 0;
  color: #909399;
}

.media-list-dialog .empty-media i {
  font-size: 36px;
  margin-bottom: 10px;
}

.media-list-dialog .empty-media p {
  margin: 0;
  font-size: 14px;
}

.media-list-dialog .media-upload-dialog .el-tabs__header {
  margin-bottom: 0;
}

.media-list-dialog .custom-tabs {
  border: none;
  box-shadow: none;
}

.media-list-dialog .category-tag {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.media-list-dialog .category-tag .el-tag {
  margin: 2px;
  max-width: 100%;
  white-space: normal;
  height: auto;
  line-height: 1.5;
  padding: 3px 6px;
}

.media-list-dialog .custom-tabs .el-tabs__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}

.media-list-dialog .custom-tabs .el-tabs__nav {
  border: none;
}

.media-list-dialog .custom-tabs .el-tabs__item {
  height: 48px;
  line-height: 48px;
  font-size: 15px;
}

.media-list-dialog .tab-content {
  padding: 20px;
}

.media-list-dialog .media-form {
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.media-list-dialog .media-form .el-form-item:last-child {
  margin-bottom: 0;
}

.media-list-dialog .media-uploader {
  text-align: center;
  background-color: #fafafa;
  margin-bottom: 20px;
  border: none;
}

.media-list-dialog .media-uploader .el-upload-dragger {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  background-color: #ffffff;
  transition: all 0.3s;
}

.media-list-dialog .media-uploader .el-upload-dragger:hover {
  border-color: #409EFF;
}

.media-list-dialog .media-uploader i {
  font-size: 48px;
  color: #c0c4cc;
  margin-bottom: 10px;
}

.media-list-dialog .upload-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.media-list-dialog .upload-text span {
  font-size: 16px;
  color: #606266;
  margin-bottom: 10px;
}

.media-list-dialog .upload-progress {
  margin-top: 20px;
}

.media-list-dialog .image-preview-dialog .el-message-box__message {
  overflow: auto;
  max-height: 80vh;
}

.media-list-dialog .image-preview-dialog .el-message-box__message img {
  object-fit: contain;
  max-width: 100%;
}

.media-list-dialog .upload-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.media-list-dialog .upload-header h3 {
  margin: 0;
  font-size: 16px;
  color: #409EFF;
}

.media-list-dialog .upload-tip-text {
  font-size: 13px;
  color: #909399;
  display: flex;
  align-items: center;
}

.media-list-dialog .upload-tip-text i {
  margin-right: 5px;
  color: #E6A23C;
}

.media-list-dialog .upload-guide {
  margin-top: 20px;
  display: flex;
  padding: 15px;
  background-color: #f0f9ff;
  border-radius: 6px;
  border-left: 3px solid #409EFF;
}

.media-list-dialog .guide-icon {
  font-size: 36px;
  color: #409EFF;
  margin-right: 15px;
  display: flex;
  align-items: center;
}

.media-list-dialog .guide-content {
  flex: 1;
}

.media-list-dialog .guide-content h4 {
  margin: 0 0 10px 0;
  color: #409EFF;
  font-size: 15px;
}

.media-list-dialog .guide-content p {
  margin: 5px 0;
  font-size: 13px;
  color: #606266;
}

.media-list-dialog .media-tabs {
  margin: 10px;
  border: none;
}

.media-list-dialog .media-list {
  padding: 10px;
}

.media-list-dialog .empty-media-tip {
  text-align: center;
  padding: 30px 0;
  color: #909399;
}

.media-list-dialog .empty-media-tip i {
  font-size: 40px;
  margin-bottom: 10px;
  color: #DCDFE6;
}

.media-list-dialog .empty-media-tip p {
  margin: 5px 0;
}

.media-list-dialog .media-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.media-list-dialog .media-header h4 {
  margin: 0;
  color: #409EFF;
  font-size: 16px;
}

/* 视频和音频上传样式 */
.video-uploader,
.audio-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 180px;
  margin-bottom: 10px;
  transition: border-color 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fafafa;
}

.video-uploader:hover,
.audio-uploader:hover {
  border-color: #409EFF;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #8c939d;
  width: 100%;
  height: 100%;
}

.upload-placeholder i {
  font-size: 48px;
  margin-bottom: 10px;
}

.video-preview,
.audio-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #000;
}

.audio-preview {
  width: 100%;
  height: auto;
  min-height: 50px;
  margin: 30px 0;
  background-color: #f5f7fa;
  padding: 10px;
  border-radius: 4px;
}

.upload-tip {
  color: #909399;
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.4;
  padding: 5px;
  background-color: #f8f8f8;
  border-radius: 4px;
}

/* 媒体预览对话框样式 */
.video-preview-dialog .el-dialog__body,
.audio-preview-dialog .el-dialog__body {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
}

.video-preview-dialog video {
  max-width: 100%;
  max-height: 70vh;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.audio-preview-dialog audio {
  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 空内容提示 */
.empty-tip {
  text-align: center;
  color: #909399;
  padding: 30px;
  font-size: 14px;
}

/* 音频预览元素样式 */
.audio-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(245, 247, 250, 0.8);
  border-radius: 4px;
  padding: 10px;
  overflow: visible;
}

.audio-preview {
  width: 100% !important;
  max-width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 10px 0 !important;
  display: block !important;
}

/* 音频上传组件样式 */
.audio-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: visible;
  width: 100%;
  height: 120px !important;
  margin-bottom: 20px;
  transition: border-color 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fafafa;
}

.audio-uploader .el-upload {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 预览对话框样式 */
.audio-preview-dialog audio {
  width: 100% !important;
  min-width: 300px !important;
  height: 50px !important;
  margin: 0 auto !important;
  display: block !important;
}

/* 确保音频元素在所有位置都可见 */
audio {
  width: 100% !important;
  min-width: 250px !important;
  height: 50px !important;
  display: block !important;
}

.audio-player-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.audio-container-large {
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
}

.audio-player-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.audio-preview-large {
  width: 100%;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 10px;
}

.audio-player-info {
  font-size: 14px;
  color: #606266;
}

.audio-container-upload {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  position: static;
  max-width: 100%;
}

.audio-preview-upload {
  width: 100%;
  max-width: 100%;
  min-width: 180px;
  height: 48px;
  border-radius: 8px;
  border: none;
  background: #f5f7fa;
  margin: 10px 0 8px 0;
  box-shadow: none;
  transition: none;
  display: block;
}

.audio-name {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  margin-bottom: 4px;
  text-align: center;
  letter-spacing: 0.5px;
  word-break: break-all;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-upload-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
  text-align: center;
}

/* 确保上传组件有足够高度 */
.el-form-item[prop="audioUrl"] {
  margin-bottom: 30px;
}

.video-container-upload {
  width: 100%;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8fafc 60%, #e3e9f3 100%);
  border-radius: 12px;
  box-shadow: 0 4px 18px 0 rgba(64, 158, 255, 0.08);
  padding: 18px 15px 15px 15px;
  margin-bottom: 10px;
  border: 1.5px solid #e0e6ed;
  position: relative;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.video-container-upload:hover {
  box-shadow: 0 8px 32px 0 rgba(64, 158, 255, 0.18);
  border-color: #409EFF;
}
.video-preview-upload {
  width: 100%;
  max-width: 320px;
  max-height: 180px;
  border-radius: 8px;
  border: 1.5px solid #d9d9d9;
  background: #000;
  margin: 10px 0 8px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.video-preview-upload:hover {
  border-color: #409EFF;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.18);
}
.video-name {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  margin-bottom: 4px;
  text-align: center;
  letter-spacing: 0.5px;
}
.video-upload-tip {
  font-size: 13px;
  color: #67c23a;
  margin-top: 2px;
  text-align: center;
  background: #f0f9eb;
  border-radius: 6px;
  padding: 4px 0;
}

/* 音频上传后预览区美化 */
.audio-container-upload {
  width: 100%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8fafc 60%, #e3e9f3 100%);
  border-radius: 12px;
  box-shadow: 0 4px 18px 0 rgba(64, 158, 255, 0.08);
  padding: 18px 15px 15px 15px;
  margin-bottom: 10px;
  border: 1.5px solid #e0e6ed;
  position: relative;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.audio-container-upload:hover {
  box-shadow: 0 8px 32px 0 rgba(64, 158, 255, 0.18);
  border-color: #409EFF;
}
.audio-preview-upload {
  width: 100%;
  max-width: 320px;
  height: 48px;
  border-radius: 8px;
  border: 1.5px solid #d9d9d9;
  background: #f5f7fa;
  margin: 10px 0 8px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.audio-preview-upload:hover {
  border-color: #409EFF;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.18);
}
.audio-name {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  margin-bottom: 4px;
  text-align: center;
  letter-spacing: 0.5px;
}
.audio-upload-tip {
  font-size: 13px;
  color: #67c23a;
  margin-top: 2px;
  text-align: center;
  background: #f0f9eb;
  border-radius: 6px;
  padding: 4px 0;
}

/* 新增样式 */
.audio-info {
  margin: 10px 0;
  font-size: 14px;
  color: #606266;
  display: flex;
  justify-content: center;
  gap: 15px;
  align-items: center;
}

.audio-duration,
.audio-current-time {
  padding: 2px 8px;
  border-radius: 12px;
  background-color: #f0f9ff;
  color: #409EFF;
  font-weight: 500;
}

.audio-preview-large {
  width: 100% !important;
  height: 50px !important;
  margin: 10px 0 !important;
  background-color: #f5f7fa;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.audio-error-message {
  margin-top: 10px;
}

/* 音频加载状态 */
.audio-loading {
  position: relative;
}

.audio-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.audio-loading::after {
  content: '加载中...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #409EFF;
  z-index: 2;
}

.audio-loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.audio-loading-indicator i {
  margin-right: 5px;
}

.upload-progress-text {
  margin-left: 10px;
  font-size: 12px;
  color: #909399;
}

.audio-player-wrapper {
  position: relative;
  border-radius: 8px;
  background-color: #f5f7fa;
  padding: 10px;
  margin: 10px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.audio-loading-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  z-index: 2;
}

.audio-loading-indicator i {
  font-size: 24px;
  color: #409EFF;
  margin-bottom: 8px;
}

.audio-info {
  margin: 12px 0;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.audio-duration,
.audio-current-time {
  padding: 4px 8px;
  font-weight: 500;
}

.audio-player-info {
  background-color: #f0f9ff;
  padding: 12px;
  border-radius: 8px;
  margin-top: 10px;
  color: #606266;
  font-size: 14px;
}

.upload-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 20px;
  background-color: #f8f8f8;
  border-radius: 6px;
}

.upload-progress-text {
  margin-top: 10px;
  font-size: 14px;
  color: #606266;
}

/* 音频预览对话框自定义样式 */
.audio-preview-dialog .el-dialog__body {
  padding: 20px;
  background-color: #fff;
}

.audio-preview-dialog .el-dialog__header {
  background-color: #409EFF;
  padding: 15px 20px;
  border-radius: 4px 4px 0 0;
}

.audio-preview-dialog .el-dialog__title {
  color: #fff;
  font-weight: 500;
}

.audio-preview-dialog .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

/* 新增音频播放器样式 */
.audio-player-wrapper {
  width: 100%;
  padding: 15px 20px;
  background-color: #f8f8f8;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 15px 0;
}

.audio-player-wrapper audio {
  width: 100%;
  height: 45px;
  outline: none;
}

.audio-info {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  color: #606266;
  font-size: 14px;
}

.audio-info-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.audio-info-item i {
  color: #409EFF;
}

.audio-current-time, .audio-duration {
  background-color: #ecf5ff;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.audio-description {
  margin-top: 15px;
  padding: 15px;
  background-color: #f0f9eb;
  border-radius: 8px;
  color: #67c23a;
}

.audio-description h4 {
  margin-top: 0;
  margin-bottom: 8px;
  font-weight: 500;
  color: #67c23a;
}

.audio-description p {
  margin: 0;
  line-height: 1.6;
}

.audio-error-message {
  margin-top: 15px;
  padding: 10px 15px;
  background-color: #fef0f0;
  border-radius: 4px;
  color: #f56c6c;
  display: flex;
  align-items: center;
  gap: 8px;
}

.audio-error-message i {
  font-size: 16px;
}

/* 编辑模式下的视频/音频预览和上传样式 */
.current-video-preview,
.current-audio-preview {
  margin-bottom: 15px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #f8f8f8;
  padding: 10px;
  border: 1px solid #e0e0e0;
}

.current-video-preview video,
.current-audio-preview audio {
  width: 100%;
  display: block;
}

.upload-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60px;
  background-color: #f5f7fa;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.upload-button:hover {
  border-color: #409EFF;
  color: #409EFF;
}

.upload-button i {
  font-size: 24px;
  margin-bottom: 8px;
}

.upload-progress-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-progress-text {
  margin-top: 8px;
  font-size: 13px;
  color: #409EFF;
}
</style>